<script setup lang="ts">

const props = defineProps(["applyformitems"]);
const emits = defineEmits(["deleteRow"]);

function deleteRow(index: number) {
  emits("deleteRow", index);
}

function tableRowClassName(rowIndex: any) {
  if (rowIndex.rowIndex % 2 === 0) {
    return "success-row";
  }
  return "";
}

function collapseProduct(cellvalue:string){
  return cellvalue.length <= 16 ? cellvalue : cellvalue.substring(0,13)+"..."; 
}
</script>

<template>
  <div>
    <el-table
      :data="props.applyformitems"
      style="width: 90%; margin: 10px auto; border: 1px solid grey"
      :row-class-name="tableRowClassName"
      height="250"
    >
      <el-table-column
        align="center"
        fixed
        prop="material_originA"
        label="原物料A"
        width="150"
      />
      <el-table-column
        align="center"
        prop="material_replaceA"
        label="替換物料A"
        width="150"
      />
      <el-table-column
        align="center"
        prop="material_product"
        label="對應成品號"
        width="120"
        :formatter="collapseProduct"
      >
        <template v-slot="scope">
            <el-popover title="成品料號" :width="200"  effect="dark" trigger="hover">
              <template #reference>
                <span>{{ collapseProduct(scope.row.material_product) }}</span>
              </template>
              <span>{{ scope.row.material_product }}</span>
            </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="replace_reason"
        label="替換原因"
        width="120"
      />
      <el-table-column
        align="center"
        prop="unit"
        label="單位"
        width="100"
      />
      <el-table-column
        align="center"
        prop="amount"
        label="數量"
        width="120"
      />
      <el-table-column
        align="center"
        prop="start_time"
        label="開始時間"
        width="120"
      >
        <template v-slot="scope">
          <span>{{(scope.row.start_time) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="comments"
        label="備註"
        width="120"
      />
      <el-table-column
        align="center"
        fixed="right"
        label="操作"
        min-width="100"
      >
        <template #default="scope">
          <el-button
            size="small"
            type="primary"
            @click="deleteRow(scope.$index)"
          >
            刪除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style>
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
</style>
